<template>
  <div class="aside">
    <el-aside :class="isCollapse ? 'aside-collapsed' : 'aside-expanded'" class="aside-container">
      <el-menu
          default-active="1-4-1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          :style="{ overflow: 'hidden', pointerEvents: isCollapse ? 'none' : 'auto' }"
      >
        <el-menu-item index="1" v-if="!isCollapse">
          <template #title>
            <span class="aside-title1" @click="navigateTo('/home')">VC-kd</span>
          </template>
        </el-menu-item>

        <el-sub-menu v-if="userRole === 1" index="2">
          <template #title>
            <span class="aside-title2">用户操作</span>
          </template>
          <el-menu-item-group>
            <el-menu-item class="aside-wordSize" index="1-1-1" @click="navigateTo('UserManage')">用户管理</el-menu-item>
<!--            <el-menu-item class="aside-wordSize" index="1-1-2">用户趋势</el-menu-item>-->
          </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <span class="aside-title2">图表操作</span>
          </template>
          <el-menu-item-group>
            <el-menu-item class="aside-wordSize" index="1-2-1" @click="navigateTo('GraphGeneration')">生成图表</el-menu-item>
            <el-menu-item class="aside-wordSize" index="1-2-2" @click="navigateTo('MyGraphs')">我的图表</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="4" v-if="!isCollapse">
          <template #title>
            <span class="aside-title2">设置</span>
          </template>
          <el-menu-item-group >
            <el-menu-item class="aside-wordSize" index="2-1" @click="navigateTo('MyInfo')">个人信息</el-menu-item>
            <el-menu-item
                class="aside-wordSize"
                index="2-2"
                @click="navigateTo('About')"
            >
              相关信息
            </el-menu-item>
            <el-menu-item class="aside-wordSize" index="2-3" @click="open">退出登录</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
      <el-button
          class="collapse-button"
          @click="toggleCollapse"
          style="font-size: 30px;"
      >
        {{ isCollapse ? '>' : '<' }}
      </el-button>
    </el-aside>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import {ElMessageBox, ElMessage, ElLoading} from 'element-plus';
import { useRouter } from 'vue-router';
// 全屏加载
const loading = ref(false);
const router = useRouter();
const userRole = ref('')

// 获取role
const fetchUserRole = () => {
  const storedUser = localStorage.getItem('user');
  if (storedUser) {
    const parsedUser = JSON.parse(storedUser);
    if (parsedUser && parsedUser.role) {
      userRole.value = parsedUser.role
    }
  }
};

onMounted(() => {
  fetchUserRole();
});

const navigateTo = (route) => {
  const loadingInstance = ElLoading.service()
  setTimeout(() => {
    router.push(route)
    loadingInstance.close()
  }, 1000);
};

const open = () => {
  ElMessageBox.alert('确认退出登录吗？', '警告', {
    confirmButtonText: '确定',
    type: "warning",
    callback: action => {
      if (action === 'confirm') {
        ElMessage({
          type: 'info',
          message: '已退出登录'
        });
        // 重定向到登录页面
        localStorage.removeItem('user');
        router.push('/login');
      }
    }
  });
};


const isCollapse = ref(true);

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value;
};

const handleOpen = (key, keyPath) => {
  // console.log(key, keyPath);
};

const handleClose = (key, keyPath) => {
  // console.log(key, keyPath);
};
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

.aside-title1 {
  color: black;
  font-size: 45px;
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}

.aside-title2 {
  font-size: 20px;
}

.aside-wordSize {
  font-size: 15px;
}

.el-menu-vertical-demo {
  height: 100%;
  border-right: 1px solid #ebeef5;
  transition: width 0.3s;
}

.aside-container {
  position: relative;
  height: 100vh;
  transition: width 0.5s;
  width: 200px;
}

.aside-collapsed {
  width: 60px;
}

.aside-expanded {
  width: 200px;
}

.collapse-button {
  position: absolute;
  bottom: 20px;
  right: 10px;
}
</style>
